<template>
  <el-dialog
    :model-value="updateDialogVisible"
    :title="dialogTitle"
    width="500"
    :before-close="handleClose"
  >
    <el-form
      :model="form"
      label-width="auto"
      :rules="rules"
      ref="ruleFormRef"
      style="max-width: 600px"
    >
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="开始时间" prop="startDate">
        <el-date-picker
          v-model="form.startDate"
          type="datetime"
          placeholder="开始时间"
          format="YYYY/MM/DD hh:mm:ss"
          value-format="x"
        />
      </el-form-item>
      <el-form-item label="结束时间" prop="endDate">
        <el-date-picker
          v-model="form.endDate"
          type="datetime"
          placeholder="结束时间"
          format="YYYY/MM/DD hh:mm:ss"
          value-format="x"
          :default-time="defaultTime1"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleCommit"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineEmits, watch } from "vue";
import { updateInteractiveActivit } from "@/api/interactiveActivity.js";
const emits = defineEmits(["update:modelValue", "initTableList"]);
const props = defineProps({
  dialogTitle: {
    type: String,
    default: "",
  },
  rowvalue: {
    type: Object,
    default: () => {},
  },
});
const form = ref({
  name: "",
  startDate: "",
  endDate: "",
});
const defaultTime1 = new Date(2000, 1, 1, 23, 59, 59); // '12:00:00'

const handleClose = () => {
  emits("update:modelValue", false);
};

const ruleFormRef = ref(null);
const rules = ref({
  name: [
    { required: true, message: "请输入活动名称", trigger: "blur" },
    { min: 1, max: 15, message: "用户名1-15", trigger: "change" },
  ],
  startDate: [{ required: true, message: "请选择开始时间", trigger: "blur" }],
  endDate: [{ required: true, message: "请选择结束时间", trigger: "blur" }],
});
const handleCommit = () => {
  ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      const res = updateInteractiveActivit(form.value).catch((err) => {
        ElMessage({
          message: err == null ? "服务异常" : err.msg + 11,
          type: "error",
          plain: true,
        });
      });
      res.then((res) => {
        if (res.code == 200) {
          handleClose();
          emits("initTableList");
          ElMessage({
            message: "修改成功",
            type: "success",
            plain: true,
          });
        } else {
          const msg = res == null ? "后端服务异常" : res.msg;
          ElMessage({
            message: msg,
            type: "error",
            plain: true,
          });
        }
      });
    }
  });
};

watch(
  () => props.rowvalue,
  () => {
    form.value = props.rowvalue;
  },
  { deep: true, immediate: true }
);
</script>
